<template>
    <div class="jobs container">
        <div class="up-box">
            <div class="recommend">
                <div class="header">
                    <div class="title">
                        <img src="../../../assets/images/icon1.png" alt="">
                        推荐职位
                    </div>
                    <div class="more link">更多
                        <i class="el-icon-arrow-right"></i></div>
                </div>
                <ul class="contents">
                    <li v-for="(item, index) in recommendsList" :key="index+'s'">
                        <div class="left">
                            <div class="job-name">
                                <span class="name">{{item.name}}</span>
                                <span class="salary">{{item.salary}}</span>
                            </div>
                            <div class="job-detail">
                                <span>{{item.detail.address}}</span>
                                <span>{{item.detail.experience}}</span>
                                <span>{{item.detail.Education}}</span>
                                <span>{{item.detail.num}}</span>
                            </div>
                        </div>
                        <div class="center">
                            <div class="job-company">{{item.company}}</div>
                            <div class="time">{{item.update}}</div>
                        </div>
                        <div class="right">
                            <div class="collect"><i class="el-icon-star-on"></i>收藏</div>
                            <button class="apply">立即申请</button>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="host">
                <div class="header">
                    <div class="title">
                        <img src="../../../assets/images/host.png" alt="">
                        热门职位
                    </div>
                    <div class="more link">更多
                        <i class="el-icon-arrow-right"></i></div>
                </div>
                <ul class="contents">
                    <li v-for="(item, index) in hostList" :key="index+'g'">
                        <div class="left">
                            <div class="job-name">
                                <span class="name">{{item.name}}</span>
                                <span class="salary">{{item.salary}}</span>
                            </div>
                            <div class="job-detail">
                                <span>{{item.detail.address}}</span>
                                <span>{{item.detail.experience}}</span>
                                <span>{{item.detail.Education}}</span>
                                <span>{{item.detail.num}}</span>
                            </div>
                        </div>
                        <div class="center">
                            <div class="job-company">{{item.company}}</div>
                            <div class="time">{{item.update}}</div>
                        </div>
                        <div class="right">
                            <div class="collect"><i class="el-icon-star-on"></i>收藏</div>
                            <button class="apply">立即申请</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="down-box fast">
            <div class="header">
                <div class="title">
                    <img src="../../../assets/images/fast.png" alt="">
                    急聘职位
                </div>
                <div class="more link">
                    更多
                    <i class="el-icon-arrow-right"></i>
                </div>
            </div>
            <ul class="contents">
                <li v-for="(item, index) in fastList" :key="index+'s'">
                    <div class="left">
                        <div class="job-name">{{item.name}}</div>
                        <div class="job-detail">
                            <span>{{item.company}}</span>
                        </div>
                    </div>
                    <div class="right salary">
                        {{item.salary}}
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "JobsBlock",
        data() {
            return {
                recommendsList: [
                    {
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30',
                        src: '../../../assets/images/图层01.png'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30',
                        src: '../../../assets/images/图层01.png'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    }
                ],
                hostList: [
                    {
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    }
                ],
                fastList: [
                    {
                        name: '高中化学老师',
                        salary: '5K-10K',
                        company: '惠州市综合高级中学'
                    },{
                        name: '高中化学老师',
                        salary: '5K-10K',
                        company: '惠州市综合高级中学'
                    },{
                        name: '高中化学老师',
                        salary: '5K-10K',
                        company: '惠州市综合高级中学'
                    },{
                        name: '高中化学老师',
                        salary: '5K-10K',
                        company: '惠州市综合高级中学'
                    }
                    ,{
                        name: '高中化学老师',
                        salary: '5K-10K',
                        company: '惠州市综合高级中学'
                    },{
                        name: '高中化学老师',
                        salary: '5K-10K',
                        company: '惠州市综合高级中学'
                    },{
                        name: '高中化学老师',
                        salary: '5K-10K',
                        company: '惠州市综合高级中学'
                    },{
                        name: '高中化学老师',
                        salary: '5K-10K',
                        company: '惠州市综合高级中学'
                    },
                ]
            }
        }
    }
</script>

<style scoped lang="less">
    .jobs {
        margin-top: 34px;
        background: #F7F8FA;
        .up-box {
            width: 100%;
            height: 487px;
            display: flex;
            justify-content: space-between;
            .recommend, .host {
                width: 590px;
                height: 100%;
                background: #FFFFFF;
                .contents {
                    width: 100%;
                    height: 100%-74px;
                    padding: 0 21px;
                    box-sizing: border-box;
                    li{
                        height: 100px;
                        padding: 25px 0;
                        box-sizing: border-box;
                        border-bottom: 1px dashed #EDE8E8;
                        display: flex;
                        justify-content: space-between;
                        .center {
                            .job-company {
                                font-size: 17px;
                                color: #666666;
                            }
                            .time {
                                margin-top: 16px;
                                font-size: 14px;
                                color: #999999;
                                text-align: left;
                            }
                        }
                        .right {
                            .collect {
                                text-align: right;
                                font-size: 16px;
                                color: #999999;
                            }
                            .apply {
                                margin-top: 13px;
                                padding: 0;
                                width: 76px;
                                height: 24px;
                                line-height: 24px;
                                text-align: center;
                                background: #fff;
                                font-size: 12px;
                                border: 1px solid #E61F1F;
                                color: #E61F1F;
                            }
                        }
                    }
                }
            }
            .host {
                .contents {
                    width: 100%;
                    height: 100%-74px;
                    padding: 0 21px;
                    box-sizing: border-box;
                    li{
                        height: 100px;
                        padding: 25px 0;
                        box-sizing: border-box;
                        border-bottom: 1px dashed #EDE8E8;
                        display: flex;
                        justify-content: space-between;
                        .center {
                            .job-company {
                                font-size: 17px;
                                color: #666666;
                            }
                            .time {
                                margin-top: 16px;
                                font-size: 14px;
                                color: #999999;
                                text-align: left;
                            }
                        }
                        .right {
                            .collect {
                                text-align: right;
                                font-size: 16px;
                                color: #999999;
                            }
                            .apply {
                                margin-top: 13px;
                                width: 76px;
                                height: 24px;
                                line-height: 24px;
                                text-align: center;
                                background: #fff;
                                font-size: 12px;
                                border: 1px solid #E61F1F;
                                color: #E61F1F;
                            }
                        }
                    }
                }
            }
        }
        .down-box {
            width: 100%;
            margin-top: 18px;
            height: 238px;
            background: #FFFFFF;
            .header {
                height: 57px;
                line-height: 57px;
                .title {
                    line-height: 57px;
                    position: relative;
                    padding-left: 32px;
                    img {
                        position:absolute;
                        left: 0;
                        top: 16px;
                    }
                }
                .more {
                    line-height: 57px;
                }
            }
            .contents {
                width: 100%;
                height: 100%-57px;
                padding: 0 17px 0 17px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-content: space-between;
                flex-wrap:wrap;
                li {
                    margin-top: 18px;
                    width: 281px;
                    height: 61px;
                    padding: 9px 15px;
                    box-sizing: border-box;
                    border: 1px solid #EEEEEE;
                    line-height: 61px;
                    text-align: left;
                    display: flex;
                    justify-content: space-between;
                    align-content: space-between;
                    cursor: pointer;
                    &:hover {
                        box-shadow:0 2px 10px 0 rgba(51,25,25,0.1);
                    }
                    .left {
                        width: 148px;
                        height: 100%;
                        .job-name {
                            font-size: 17px;
                            color: #000;
                            height: 17px;
                            line-height: 17px;
                            span {
                                display: block;
                            }
                        }
                        .job-detail {
                            height: 7px;
                            line-height: 7px;
                            font-size: 12px;
                            text-align: left;
                        }
                    }
                    .right {
                        color: #E61F1F;
                        font-size: 15px;
                        line-height: 10px;
                    }
                }
            }
        }
        /*common-start*/
        .header {
            width: 100%;
            height: 72px;
            padding: 0 15px 0 35px;
            box-sizing: border-box;
            border-bottom: 1px solid #EEEEEE;
            .title {
                line-height: 72px;
                float: left;
                font-size: 23px;
                position: relative;
                padding-left: 32px;
                img {
                    position:absolute;
                    left: 0;
                    top: 19px;
                }
            }
            .more {
                height: 100%;
                line-height: 72px;
                float: right;
                font-size: 17px;
            }
        }
        .name {
            color: #000;
            font-size: 17px;
            margin-right: 14px;
        }
        .salary {
            color: #E61F1F;
            font-size: 18px;
        }
        .job-detail {
            margin-top: 16px;
            font-size: 14px;
            color: #666666;
            text-align: left;
        }
        /*common-end*/
    }
</style>